<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <style>
        #userInfoDialog {
            padding: 20px;
            width: 400px;
            display: none; /*隐藏层*/
        }

        #userInfoDialog p {
            padding: 10px 0;
        }
    </style>
</head>
<body>
<div class="layui-fluid">

    <div class="layui-card">
        <div class="layui-card-header">频道列表</div>
        <div class="layui-card-body">
            <table id="channelList" lay-filter="channelFilter"></table>
        </div>
    </div>

    <!-- 频道编辑对话框 -->
    <div id="editDialog" style="display: none; padding: 20px;">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>编辑频道</legend>
            <div class="layui-field-box">
                <div class="layui-col-md12">
                    <form class="layui-form layui-form-pane" lay-filter="formEdit" id="formEdit">
                        <!--表单控件项：封面图上传-->
                        <div class="layui-form-item">
                            <label class="layui-form-label">封面图:</label>
                            <div class="layui-input-block">
                                <button class="layui-btn layui-btn-normal" type="button" id="btnUpload">
                                    <i class="layui-icon layui-icon-upload"></i>
                                    选择文件
                                </button>
                                <input type="file" id="coverImgInput" style="display: none;">
                                <img class="layui-upload-img" id="uploadPreview" style="width: 100px; height: 100px;">
                                <input type="hidden" name="img" id="imgUrl">
                            </div>
                        </div>
                        <!--表单控件项：频道名-->
                        <div class="layui-form-item">
                            <label class="layui-form-label">频道名:</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" id="channelName" required lay-verify="required" placeholder="请输入频道名" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <!--表单控件项：介绍-->
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">介绍:</label>
                            <div class="layui-input-block">
                                <textarea name="summary" id="channelSummary" placeholder="请输入介绍" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <!--表单控件项：保存按钮-->
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="saveEdit">保存</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </fieldset>
    </div>
</div>

<script src="../res/layui/layui.js"></script>
<script>
    layui.use(['table', 'layer', 'form', 'jquery', 'upload'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.jquery;
        var upload = layui.upload;
        var rowData = null;

        table.render({
            elem: '#channelList',
            url: '/category/list',
            page: {
                limit: 2,
                limits: [2, 5, 10, 15, 20]
            },
            cols: [[
                {field: 'id', title: 'ID', hide: true},
                {type: 'checkbox'},
                {title: '序号', type: 'numbers'},
                {title: '频道名', field: 'name'},
                {title: '封面图', templet: '<div><img src="{{d.img}}" alt=""></div>'},
                {title: '介绍', field: 'summary'},
                {title: '操作', templet: '#rowTools'}     // 自定义行工具栏
            ]],
            toolbar: '#toolbar',   //自定义头工具栏
        });

        //为表格行绑定事件
        table.on('tool(channelFilter)', function (obj) {
            var layEvent = obj.event;
            rowData = obj.data;

            switch (layEvent) {
                case 'edit':
                    //弹出编辑对话框
                    layer.open({
                        type: 1,
                        title: '编辑频道',
                        shade: 0.6,
                        shadeClose: true,
                        maxmin: true,
                        area: ['300px', '600px'],
                        anim: 0,
                        btn: ['关闭'],
                        content: $('#editDialog'),
                        success: function (layero) {
                            //将当前行数据填充到表单中
                            $('#channelName').val(rowData.name);
                            $('#channelSummary').val(rowData.summary);
                            $('#uploadPreview').attr('src', rowData.img);
                            $('#imgUrl').val(rowData.img);

                            // 处理封面图片上传
                            $('#btnUpload').on('click', function () {
                                $('#coverImgInput').click();
                            });

                            $('#coverImgInput').on('change', function (event) {
                                var file = event.target.files[0];
                                var reader = new FileReader();
                                reader.onload = function (e) {
                                    $('#uploadPreview').prop('src', e.target.result);
                                    $('#imgUrl').val(e.target.result);  // 更新隐藏的图片URL字段
                                };
                                reader.readAsDataURL(file);
                            });
                        }
                    });
                    break;
                case 'del':
                    //弹出删除对话框
                    layer.confirm('确定删除吗？', function (index) {
                        // 这里执行删除操作，例如发起请求删除数据
                        $.ajax({
                            url: '/category/delete',
                            type: 'POST',
                            data: { id: rowData.id },
                            success: function (res) {
                                if (res.success) {
                                    layer.msg('删除成功');
                                    table.reload('channelList');
                                } else {
                                    layer.msg('删除失败');
                                }
                            }
                        });
                        layer.close(index);
                    });
                    break;
            }
        });

        // 表单提交事件
        form.on('submit(saveEdit)', function (data) {
            var editedData = {
                id: rowData.id,
                name: data.field.name,
                summary: data.field.summary,
                img: data.field.img
            };

            console.log(editedData);

            // 这里执行保存操作，例如发起请求保存数据
            $.ajax({
                url: '/category/update',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(editedData),
                success: function (res) {
                    if (res.code === 0) {
                        layer.msg('保存成功');
                        layer.closeAll('page');
                        table.reload('channelList');
                    } else {
                        layer.msg('保存失败');
                    }
                }
            });
            return false;
        });
    });
</script>

<!--操作栏自定义模板-->
<script id="rowTools" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">
            <i class="layui-icon layui-icon-list"></i>
            编辑
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
    </div>
</script>

</body>
</html>